<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>One HTML Page Challenge</title>

        <!-- Icons -->

        <!-- Favicon -->
        <link rel="shortcut icon" href="./meta/favicon.ico" />

        <!-- Apple/Safari icon -->
        <link rel="apple-touch-icon" sizes="57x57" href="./meta/apple-icon-57x57.png" />
        <link rel="apple-touch-icon" sizes="60x60" href="./meta/apple-icon-60x60.png" />
        <link rel="apple-touch-icon" sizes="72x72" href="./meta/apple-icon-72x72.png" />
        <link rel="apple-touch-icon" sizes="76x76" href="./meta/apple-icon-76x76.png" />
        <link rel="apple-touch-icon" sizes="114x114" href="./meta/apple-icon-114x114.png" />
        <link rel="apple-touch-icon" sizes="120x120" href="./meta/apple-icon-120x120.png" />
        <link rel="apple-touch-icon" sizes="144x144" href="./meta/apple-icon-144x144.png" />
        <link rel="apple-touch-icon" sizes="152x152" href="./meta/apple-icon-152x152.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="./meta/apple-icon-180x180.png" />

        <!-- Android Chrome -->
        <link rel="icon" type="image/png" sizes="192x192" href="./meta/android-icon-192x192.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="./meta/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="96x96" href="./meta/favicon-96x96.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="./meta/favicon-16x16.png" />

        <!-- Square Windows tiles -->
        <meta name="msapplication-square70x70logo" content="./meta/ms-icon-70x70.png" />
        <meta name="msapplication-square144x144logo" content="./meta/ms-icon-144x144.png" />
        <meta name="msapplication-square150x150logo" content="./meta/ms-icon-150x150.png" />
        <meta name="msapplication-square310x310logo" content="./meta/ms-icon-310x310.png" />

        <!-- Rectangular Windows tile -->
        <meta name="msapplication-wide310x150logo" content="./meta/ms-icon-310x150.png" />

        <!-- Web App Manifest -->
        <link rel="manifest" href="./meta/site.webmanifest" />

        <!-- Windows tile theme color -->
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="msapplication-TileImage" content="./meta/ms-icon-144x144.png" />
        <meta name="msapplication-config" content="./meta/browserconfig.config" />

        <!-- Android theme color -->
        <meta name="theme-color" content="#ffffff" />
        <link rel="mask-icon" href="./meta/safari-pinned-tab.svg" color="#ffa500" />

        <!-- END Icons -->

        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-144023646-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag("js", new Date());
            gtag("config", "UA-144023646-1");
        </script>
        <meta property="og:title" content="One HTML Page Challenge" />
        <meta property="og:image" content="https://repository-images.githubusercontent.com/194445383/571a9000-9cd0-11e9-9a72-2faf76647a01" />
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

        <style>
            .jumbotron {
                text-align: center;
            }

            .logo {
                max-width: 70%;
            }

            body {
                background: repeating-linear-gradient(45deg, #000000, #1e1e1e 10px, #15191d 10px, #15191d 20px);
            }

            .card-text:nth-of-type(2)::before {
                display: inline-block;
                content: "Supported in:";
                margin-right: 0.5em;
            }

            .btn.btn-success {
                color: #ffffff;
                background-color: hotpink;
                border-color: hotpink;
            }

            .btn.btn-success:hover,
            .btn.btn-success:focus,
            .btn.btn-success:active,
            .btn.btn-success.active {
                color: #ffffff;
                background-color: deeppink;
                border-color: deeppink;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <br />

            <div class="card">
                <div class="card-body">
                    <div class="jumbotron">
                        <img src="./meta/one-html-page-logo.png" alt="One Html Page Challenge" class="logo" />
                        <hr class="my-4" />
                        <p>
                            The goal is to create anything you want within 1 single html file. Practice your skills with no assistance from libraries, no separation of files, and no assistance of a modern framework.
                            <b>How creative can you be with such restrictions?</b>
                        </p>
                        <a class="btn btn-primary btn-lg" href="https://github.com/Metroxe/one-html-page-challenge/blob/master/README.md#how-to-submit" role="button">Submit an Entry</a>
                        <a class="btn btn-primary btn-lg" href="https://github.com/Metroxe/one-html-page-challenge" role="button">Github</a>
                        <a class="btn btn-success btn-lg" href="https://github.com/sponsors/Metroxe" role="button">Sponsor ❤️</a>
                    </div>
                    <div class="input-group flex-nowrap">
                        <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="addon-wrapping" id="search" oninput="searchOnInput()" />
                        <div class="input-group-append">
                            <span class="input-group-text" id="addon-wrapping">🔍</span>
                        </div>
                    </div>
                    <div id="list"></div>
                </div>
            </div>
        </div>
        <br />

        <script src="./entries.js"></script>
        <script>
            // sort based on title
            const sortedEntries = entries.sort((a, b) => (a.title > b.title ? 1 : b.title > a.title ? -1 : 0));

            // create initial list
            searchOnInput();

            function searchOnInput() {
                //get elements
                const filter = document.getElementById("search").value.toLowerCase();
                const list = document.getElementById("list");

                // remove children
                while (list.firstChild) {
                    list.removeChild(list.firstChild);
                }

                // filter list
                const filteredEntries = sortedEntries.filter((entry) => {
                    let key;
                    for (key in entry) {
                        if (entry.hasOwnProperty(key)) {
                            const prop = entry[key];
                            if (typeof prop === "string" && prop.toLowerCase().includes(filter)) {
                                return true;
                            }
                        }
                    }
                    return false;
                });

                // create list
                filteredEntries.forEach(({ title, description, filename, github, author, compatibleBrowsers, sponsored }) => {
                    // horizontal rule
                    const hr = document.createElement("hr");
                    list.appendChild(hr);

                    const card = document.createElement("div");
                    card.className = "card";

                    const body = document.createElement("div");
                    body.className = "card-body";
                    card.appendChild(body);

                    // title
                    const cardTitle = document.createElement("h5");
                    const cardTitleNode = document.createTextNode(title);
                    cardTitle.className = "card-title";
                    cardTitle.appendChild(cardTitleNode);
                    body.appendChild(cardTitle);

                    // author
                    if (author) {
                        const authorSubtitle = document.createElement("h6");
                        const authorSubtitleNode = document.createTextNode(author);
                        authorSubtitle.className = "card-subtitle mb-2 text-muted";
                        authorSubtitle.appendChild(authorSubtitleNode);

                        // add a sponsor tag
                        if (sponsored) {
                            const sponsorEmoji = document.createElement("a");
                            const sponsorEmojiNode = document.createTextNode(" ❤️");
                            sponsorEmoji.href = "https://github.com/sponsors/Metroxe";
                            sponsorEmoji.title = "Sponsored Submission";
                            sponsorEmoji.appendChild(sponsorEmojiNode);
                            authorSubtitle.appendChild(sponsorEmoji);
                        }

                        // add an owner tag for myself
                        if (author.includes("Christopher Powroznik")) {
                            const ownerEmoji = document.createElement("a");
                            const ownerEmojiNode = document.createTextNode(" 👑️");
                            ownerEmoji.href = "https://github.com/Metroxe";
                            ownerEmoji.title = "Owner";
                            ownerEmoji.appendChild(ownerEmojiNode);
                            authorSubtitle.appendChild(ownerEmoji);
                        }

                        body.appendChild(authorSubtitle);
                    }

                    // description
                    if (description) {
                        const cardDescription = document.createElement("p");
                        const cardDescriptionNode = document.createTextNode(description);
                        cardDescription.className = "card-text";
                        cardDescription.appendChild(cardDescriptionNode);
                        body.appendChild(cardDescription);
                    }

                    // browser list
                    if (compatibleBrowsers) {
                        const browserList = document.createElement("p");
                        const browser = compatibleBrowsers.join(", ");
                        const browserNameNode = document.createTextNode(browser);
                        browserList.className = "card-text";
                        browserList.appendChild(browserNameNode);
                        body.appendChild(browserList);
                    }

                    // toolbar
                    const toolbar = document.createElement("div");
                    const group1 = document.createElement("div");
                    const group2 = document.createElement("div");
                    toolbar.className = "btn-toolbar";
                    group1.className = "btn-group mr-2";
                    group2.className = "btn-group mr-2";
                    toolbar.appendChild(group1);
                    toolbar.appendChild(group2);
                    body.appendChild(toolbar);

                    // HTML Link
                    const linkButton = document.createElement("a");
                    const linkButtonNode = document.createTextNode(filename);
                    linkButton.className = "btn btn-primary btn-md";
                    linkButton.href = `./entries/${filename}`;
                    linkButton.appendChild(linkButtonNode);
                    group1.appendChild(linkButton);

                    // Source Code Link
                    const sourceCodeButton = document.createElement("a");
                    const sourceCodeNode = document.createTextNode("Source");
                    sourceCodeButton.className = "btn btn-secondary btn-md";
                    sourceCodeButton.href = `https://github.com/Metroxe/one-html-page-challenge/blob/master/entries/${filename}`;
                    sourceCodeButton.appendChild(sourceCodeNode);
                    group1.appendChild(sourceCodeButton);

                    // github button
                    if (github) {
                        const githubButton = document.createElement("a");
                        const githubButtonNode = document.createTextNode("Github");
                        githubButton.className = "btn btn-primary btn-md";
                        githubButton.href = `https://github.com/${github}`;
                        githubButton.appendChild(githubButtonNode);
                        group2.appendChild(githubButton);
                    }
                    list.appendChild(card);
                });
            }
        </script>
    </body>
</html>
